<style lang="scss" scoped>
@import "@/assets/css/index";
.getMoneyRecord {
  .box {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: white;
    margin-top: 1px;
    .line {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .line_up {
          display: flex;
          flex-direction: column;
          :nth-child(1) {
              margin-bottom: 10px;
          }
      }
    }
  }
}
</style>
<template>
  <div class="getMoneyRecord">
    <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="balancePage"
      >
        <div class="box padding-all-m" v-for="item in list" :key="item.id">
          <div class="line">
            <div class="line_up">
                <span>{{ item.reason }}</span>
                <span class="color-s">{{ item.createtime }}</span>
            </div>
            <span v-if="item.reason == '商家提现'"
              >-{{ item.balance }}</span
            >
            <span v-else :style="{color: $store.getters.getMasterColor}">
                +{{ item.balance }}
            </span>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { List, PullRefresh } from "vant";
// import myMixins from '@/assets/js/mixins.js'
export default {
  // mixins:[myMixins],
  name: "GetMoneyRecord",
  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh,
  },
  props: {
    id: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 20,
      list: [],
      userInfo: "",
      loading: false,
      finished: false,
      loadingRefresh: false,
    };
  },
  mounted() {
    this.userInfo = this.$store.state.userInfo;
    if (!this.userInfo) {
      this.$router.go(-1);
      return;
    }
    this.balancePage();
  },
  methods: {
    onRefresh() {
      this.pageNo = 1;
      this.list = [];
      this.balancePage();
    },
    balancePage() {
      const _this = this;
      let params = {
        // merchant_id: this.userInfo.id,
        promoter_id: this.id,
        // openid: this.userInfo.openid,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      };
      this.loading = true;
      this.loadingRefresh = true;
      _this.$request
        .BalancePage(params)
        .then((res) => {
          _this.list.push(...res.data.data);
          if (_this.pageNo >= Math.ceil(res.data.totalCount / _this.pageSize)) {
            _this.finished = true;
          } else {
            _this.pageNo++;
          }
        })
        .finally(() => {
          console.log("finally");
          this.loadingRefresh = false;
          this.loading = false;
        });
    },
  },
};
</script>